require('./PageGalleryView.less');
import { Control, Route } from 'react-keeper';
import React,{Component} from 'react';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import 'weui';
import { Tab,TabBarItem,TabBar,Page,Article,
  Panel,
  PanelHeader,Button,
  PanelBody,Gallery,
  PanelFooter,
  MediaBox,
  MediaBoxHeader,
  MediaBoxBody,
  MediaBoxTitle,
  MediaBoxDescription,
  MediaBoxInfo,
  MediaBoxInfoMeta,
  Cells,
  Cell,
  CellHeader,
  CellBody,
  CellFooter,
  Flex,
  FlexItem,
  Grids
} from  'react-weui/build/packages'

class GalleryView extends Component {
    constructor(props) {
      super(props);
      this.state = {

      };
      this.handleChange = this.handleChange.bind(this);
      this.myHome = this.myHome.bind(this);
      this.hideGallery = this.hideGallery.bind(this);

    }

  hideGallery(){
    console.log('002');
    Actions.hidetp();
    Control.go(-1);
    console.log('over');
  }

  renderGallery(){
    if(!this.state.galleryview.gallery) return false;
    //let srcs = this.state.galleryview.demoFiles.map(file=>file.url)
    let srcs = this.state.galleryview.imgls.map(file=>file.url)

    return (
      <Gallery
        src={srcs}
        show
        defaultIndex={this.state.galleryview.gallery.id}
        onClick={ e=> {
          //avoid click background item
          e.preventDefault()
          e.stopPropagation();
          this.setState({gallery: false})
        }}
      >
        <Button
          style={{display: 'inline-block',
            width: 'auto',
            color: 'white',
            border: 'none',
            position: 'absolute',
            top: '-55px',
            left: '15px'}}
          onClick={this.hideGallery}
          plain>
          返回
        </Button>

      </Gallery>
    )
  }

    handleChange(key){
        //this.dispatch('setTabbarIndex',key);
        //Control.go(this.state.menu[key].path, ); // keeper的跳转
    }

  myHome() {
    Control.go('/home');
  }

    render() {

      const BackButtonStyle = {
        display: 'inline-block',
        width: 'auto',
        color: 'white',
        border: 'none',
        position: 'absolute',
        top: '5px',
        left: '15px'
      }
        return (

          <Page className="cell" title="Uploader" subTitle="上传组件，一般配合Gallery使用">
            { this.renderGallery() }
          </Page>
        );
    }

  componentWillMount() {
      Actions.initMode();
      if(Control.state){
        Actions.loadMode(Control.state);
      }
  }

    componentDidMount() {

    }

}

ReactMixin.onClass(GalleryView, Reflux.connect(Store, 'galleryview'));

export default GalleryView ;
